<template>
  <div>
    <h1>Foo 组件</h1>
    <p>{{ message }}</p>
    <button @click="test">TypeScript</button>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
// import Component from 'vue-class-component'
// 常规方式
// export default {

// }

// Options APIs
export default Vue.extend({
  name: 'Foo',
  data () {
    return {
      message: 'Hello World'
    }
  },
  created ():void {console.log('created')},
  computed: {},
  methods: {
    test ():void {
      console.log('test')
    }
  }
})

// Class APIs
// 类名：组件的name
// @Component // 装饰器
// export default class Foo extends Vue {
//   // foo: string
//   // constructor () {
//   //   super()
//   //   this.foo = 'bar'
//   // }
//   foo = 'bar'

//   mounted () {
//     console.log('mounted')
//   }

//   test () {
//     console.log('hello')
//     this.foo = 'foo'
//   }

//   // 计算属性
//   get name () {
//     return this.foo + ' Hello'
//   }
// } 
</script>

<style>

</style>